<template>
	<view class="pages">
		<s-skeleton type="info" :loading="loading3"></s-skeleton>
		<view class="list" v-if="dataList && dataList.length > 0">
			<view class="item" v-for="(item,index) in dataList" :key="index" @tap="$wanlshop.to('/pages/restaurant/common/article/article?id=' + item.id)">
				<view class="left">
					<view class="info">
						<text class="text-cut-1">{{item.title}}</text>
						<text>{{item.createtime_text}}</text>
					</view>
				</view>
				<view class="money">
					<uni-icons type="right" size="20" color="727272"></uni-icons>
				</view>
			</view>
		</view>
		<s-empty v-else></s-empty>
		
		<uni-load-more v-if="dataList && dataList.length > 0" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				loading3: true,
				dataList: null,
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				}
			}
		},
		computed: {
			...mapState(['user','common'])
		},
		onLoad() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			async loadData() {
				let res = await this.$api.getNotice({
					page:this.current_page
				});
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					this.dataList = this.reload ? res.data.data : (this.dataList || []).concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
					this.loading3 = false;
				}
			},
		}
	}
</script>

<style lang="less" scoped>
.list {
		padding: 0 30rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 154rpx;
			border-bottom: 1px solid rgba(237, 237, 237, 1);

			&:last-child {
				border: none;
			}

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 500rpx;
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.info {
					display: flex;
					flex-direction: column;

					text {
						display: inline-block;
						color: #191919;

						&:nth-child(1) {
							font-weight: 500;
							font-size: 32rpx;
							height: 46rpx;
							line-height: 46rpx;
						}

						&:nth-child(2) {
							color: #727272;
							font-size: 24rpx;
							height: 32rpx;
							line-height: 32rpx;
						}
					}
				}
			}

			.money {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				text {

					// color: #191919;
					&:nth-child(1) {
						color: #1777FF;
						font-size: 34rpx;
						font-weight: 500;
					}

					&:nth-child(2) {
						color: #727272;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>